<!--原产地对应关系-->
<template>
    <Modal :value="value" @input="handleInput" width="746" :closable="false" class-name="countryOFori-modal">
        <div slot="header">
            原产地对应关系
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <Form :label-width="130" inline :model="countryOForiData" ref="countryOForiDataRef">
            <FormItem label="报关单商品序号" prop="decGoodsNo">
                <Input v-model="countryOForiData.decGoodsNo" placeholder="报关单商品序号"></Input>
            </FormItem>
            <FormItem label="随附单证商品项号" prop="ecoNo">
                <Input v-model="countryOForiData.ecoNo" placeholder="随附单证商品项号"></Input>
            </FormItem>
        </Form>
        <div class="btn-box">
            <Button type="primary" @click="addCountryOFori">新增</Button>
            <Button type="primary" @click="saveCountryOFori">保存</Button>
            <Button type="primary" @click="delCountryOFori">删除</Button>
        </div>
        <div class="table-Modal">
            <Table
                @on-row-click="selectRowHandle"
                highlight-row
                ref="tableRef"
                :columns="column"
                :data="tableList"
            ></Table>
        </div>
        <div slot="footer">
            <Button type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="commitCountryOFori">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: 'CountryOForiModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        countryOFori: {
            default: function () {
                return {
                    CustomsDeclareContainerDate: {},
                    CommInfoDataList: []
                }
            },
            type: Object
        }
    },
    data () {
        return {
            countryOForiData: {
                certType: '',
                ecoCertNo: '',
                decGoodsNo: '',
                ecoNo: '',
                edocRealaId: '',
                declareDocId: ''
            },
            column: [
                {
                    type: 'index',
                    title: '序号',
                    align: 'center',
                    width: 100
                },
                {
                    title: '报关单商品序号',
                    key: 'decGoodsNo',
                    align: 'center'
                },
                {
                    title: '对应随附单证商品项号',
                    key: 'ecoNo',
                    align: 'center'
                }
            ],
            tableList: []
        }
    },
    created () {
        this.parentCurrentId = ''
        this.currentSelectItemIndex = ''
        this.commInfoDataList = []
        this.init(this.countryOFori.CustomsDeclareContainerDate, this.countryOFori.CommInfoDataList)
    },
    methods: {
        init (data, commInfoDataList) {
            this.countryOForiData.certType = data.docuCode
            this.countryOForiData.ecoCertNo = data.certCode
            this.parentCurrentId = data.numid
            this.commInfoDataList = commInfoDataList
            this.tableList = data.customsDeclareEdocRealas
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        closeModel () {
            this.handleInput(false)
            this.addCountryOFori()
        },

        addCountryOFori () {
            Object.keys(this.countryOForiData).forEach(k => {
                this.countryOForiData[k] = ''
            })
            this.clearCurrentHandle()
        },

        // 清除当前选中的行
        clearCurrentHandle () {
            this.currentSelectItemIndex = ''
            this.$refs.tableRef.clearCurrentRow()
        },

        saveCountryOFori () {
            if (!this.countryOForiData.decGoodsNo) {
                this.$Message.warning('请输入报关单商品序号')
                return false
            }
            if (!this.countryOForiData.ecoNo) {
                this.$Message.warning('随附单证商品项号')
                return false
            }

            const isHasNo = this.commInfoDataList.some(item =>
                this.countryOForiData.decGoodsNo == item.goodsIndex
            )
            if (!isHasNo) {
                this.$Message.warning('商品序号不存在')
                return false
            }

            // 新增保存 & 编辑保存
            let index = this.currentSelectItemIndex
            const data = JSON.parse(JSON.stringify(this.countryOForiData))
            if (!String(index)) { // 新增保存
                this.tableList.push(data)
            } else { // 编辑保存
                this.tableList.splice(index, 1, data)
            }
            this.addCountryOFori()
        },

        delCountryOFori () {
            if (!String(this.currentSelectItemIndex)) {
                this.$Message.warning('请先选择要删除的数据！')
                return false
            }

            this.tableList.splice(this.currentSelectItemIndex, 1)
            this.addCountryOFori()
        },

        // 单击选中
        selectRowHandle (currentRow, index) {
            if (currentRow) {
                this.currentSelectItemIndex = index
                Object.keys(this.countryOForiData).forEach(k => {
                    this.countryOForiData[k] = currentRow[k] || ''
                })
            }
        },

        commitCountryOFori () {
            let res = {
                parentCurrentId: this.parentCurrentId,
                list: this.tableList
            }
            this.$emit('commitCountryOFori', res)
            this.closeModel()
        }
    }
}
</script>

<style lang="less">
    .countryOFori-modal {
        .btn-box {
            margin-bottom: 15px;

            button {
                margin-right: 10px;
            }
        }
    }
</style>
